<template>
  <li class="add-event">
    <img src="../../assets/icon/add.svg" alt="" />
    <a href="#" @click="hansleAddEvent()">我要上报</a>
    <!-- <a href="#" @click="dialogVisibleReport = true">我要上报</a> -->
  </li>
  <el-dialog title="报告事件" v-model="dialogVisibleReport">
    <div class="center">
      <span>事件类型：</span>
      <el-select v-model="event_type" class="m-2" placeholder="请选择事件类型" size="large">
        <el-option
          v-for="item in option1"
          :key="item.event_type"
          :label="item.label"
          :value="item.event_type"
        /> </el-select
      ><br /><br /><br />
      <span>事件描述：</span
      ><el-input
        class="elinput"
        v-model="event_describe"
        placeholder="请输入事件描述"
      /><br /><br /><br />
      <span>选择路段：</span
      ><el-select v-model="road_section_id" class="m-2" placeholder="请选择事发路段" size="large">
        <el-option
          v-for="item in options"
          :key="item.road_section_id"
          :label="item.label"
          :value="item.road_section_id"
        /> </el-select
      ><br /><br /><br />
      <span
        >驾驶员姓名：<el-input
          class="elinput"
          v-model="event_driver"
          placeholder="请输入驾驶员姓名" /></span
      ><br /><br /><br />
      <span
        >涉事车辆车牌号：<el-input
          class="carnaber"
          v-model="event_car_number"
          placeholder="涉事车辆车牌号"
      /></span>
      <div class="footer">
        <el-button type="primary" round @click="handleAdd()">上报事件</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { addeventsPost } from '../../request/onevents'
import { userModules } from '../../stores/userModulsStore'

const dialogVisibleReport = ref(false)
const user_id = ref(2)
const event_type = ref()
const event_describe = ref()
const road_section_id = ref()
const event_driver = ref()
const event_car_number = ref()
const { userLoginData } = userModules()
const hansleAddEvent = () => {
  if (userLoginData.value.id) {
    dialogVisibleReport.value = true
  } else {
    ElMessage.error('请登录')
  }
}

const option1 = [
  {
    event_type: '碰撞',
    label: '碰撞'
  },
  {
    event_type: '刮擦',
    label: '刮擦'
  },
  {
    event_type: '失火',
    label: '失火'
  },
  {
    event_type: '翻车',
    label: '翻车'
  },
  {
    event_type: '碾压',
    label: '碾压'
  },
  {
    event_type: '其他',
    label: '其他'
  }
]
const options = [
  {
    road_section_id: 'DL01',
    label: '民族大道'
  },
  {
    road_section_id: 'DL02',
    label: '关山大道'
  },
  {
    road_section_id: 'DL03',
    label: '光谷大道'
  },
  {
    road_section_id: 'DL04',
    label: '雄楚大道'
  },
  {
    road_section_id: 'DL05',
    label: '光谷广场环路'
  },
  {
    road_section_id: 'DL06',
    label: '珞雄路'
  },
  {
    road_section_id: 'DL07',
    label: '虎泉街'
  },
  {
    road_section_id: 'DL08',
    label: '珞喻路'
  },
  {
    road_section_id: 'DL09',
    label: '南湖大道'
  },
  {
    road_section_id: 'DL10',
    label: '南三环'
  },
  {
    road_section_id: 'DL11',
    label: '珞狮路'
  }
]
function handleAdd() {
  if (
    !event_type.value ||
    !event_describe.value ||
    !road_section_id.value ||
    !event_driver.value ||
    !event_car_number.value
  ) {
    alert('请填写完整信息')
    retur
  }
  addeventsPost(
    user_id.value,
    event_type.value,
    event_describe.value,
    road_section_id.value,
    event_driver.value,
    event_car_number.value
  )
    .then((res) => {
      // console.log(res)
      alert('上报成功')
      dialogVisibleReport.value = false
      event_type.value = ''
      event_describe.value = ''
      road_section_id.value = ''
      event_driver.value = ''
      event_car_number.value = ''
    })
    .catch((err) => {
      // console.log(err)
      alert('上报失败')
    })
}
</script>

<style lang="less" scoped>
.add-event {
  margin-right: 20px;
  padding-top: 3px;
}

a {
  font-size: 16px;
  color: #333;
  text-decoration: none;
}
.elinput {
  width: 50%;
}
.carnaber {
  width: 30%;
}
.footer {
  margin-top: 20px;
  margin-left: 85%;
}
.center {
  margin-left: 25%;
}
</style>
